<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animated transit</title>  
        <style>
        	#paper{
        		background:#eee;
        	}
        	
        	svg{
        		background:#aaa;
        	}
        </style>                   
    </head>
    <body>
    	    	    	    	  
        <div id="paper"></div>
                                                           
        <script src="../../build/astrochart.js"></script>
        <script type="text/javascript">  
        
        	var dataRadix = {	
        		"planets":{"Moon":[45.930008627285154],"Venus":[263.2584780960899],"Jupiter":[173.07043720306802],"NNode":[174.6895307834239],"Mars":[217.97167231451178],"Lilith":[196.19480722950317],"Saturn":[252.92341772675047],"Chiron":[348.1157239728284],"Uranus":[16.7900184974611],"Sun":[297.68062428797253],"Mercury":[289.10132025725494],"Neptune":[338.01899718442604],"Pluto":[285.6473452237151, -0.123]},
        		"cusps":[348.20510089894015,38.108507808919654,65.20783751818992,84.96083001338991,103.77897207128007,127.1084408347092,168.20510089894015,218.10850780891965,245.20783751818993,264.9608300133899,283.77897207128007,307.1084408347092]
        	};
        	
		    var dataTransit = {
		    	"planets":{"Moon":[60, -1],"Venus":[305.6996431634707],"Jupiter":[198.6565699576221],"NNode":[157.25592636170012],"Mars":[324.84013049518734],"Lilith":[232.88904207991555],"Saturn":[259.1015412368795, -0.2],"Chiron":[350.7285587924208],"Uranus":[20.678747795787075],"Sun":[260.94912160755536],"Mercury":[281.5699804920016],"Neptune":[339.3848859932604],"Pluto":[286.29683069280685, -0.1]},		    	
		    	"cusps":[90, 116, 170, 210, 236, 255, 274, 330, 10, 40, 60, 80]
		    };
		    
		    var animateToData = {
		    	"planets":{"Moon":[270 + 360],"Venus":[350],"Jupiter":[210],"NNode":[160],"Mars":[10],"Lilith":[270],"Saturn":[250, -0.2],"Chiron":[6],"Uranus":[35],"Sun":[298],"Mercury":[320],"Neptune":[345],"Pluto":[280,-0.1]},
				"cusps":[300, 350, 30, 56, 75, 94, 116, 170, 210, 236, 255, 274]
		    };
			                              	        	        	        	            
        	window.onload = function () {
            	var chart = new astrology.Chart( 'paper', 800, 800, {MARGIN:100});
            	var radix = chart.radix( dataRadix );            	            
				var transit = radix.transit( dataTransit );
				
				// data, duration in seconds, isReverse, callback
				transit.animate( animateToData, 6, false, function(){
					console.log("Animation finished.");
				});																																 																																																            													            	       
			};
		</script>		    
    </body>
</html>